<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字" v-model="m">
  <input type="text" placeholder="请输入数字" v-model="n">
  <br>
  <button @click="calculate('+')">加</button>
  <button @click="calculate('-')">减</button>
  <button @click="calculate('*')">乘</button>
  <button @click="calculate('/')">除</button>
  <br><br>
  <h4>计算结果:{{result}}</h4>
</template>

<script setup>
  import {ref} from "vue";

  const m = ref('');
  const n = ref('');
  const result = ref('');
  const calculate = (o)=>{
    if(!/^\d+$/.test(m.value) || !/^\d+$/.test(n.value)){
      m.value='';
      n.value='';
      return alert('数字才能参与计算，请重新输入');
    }
    result.value = eval(m.value+o+n.value);
  }

</script>

<style scoped>

</style>